import React , { useEffect , useState } from 'react'
//空状态的引入
import { Empty } from 'antd';
//引入  样式
import '../../User_Index_scss/user_index.css'







type Props = {}

const Index = (props: Props) => {
useEffect(()=>{

  //进去及加载方法
  header_tan()
},[])


let header_tan = ()=>{
            //定时器方法
      setTimeout(()=>{
        setflagClass(false)

        //定时  -- 3秒
      },3000)
}

//弹框的显示隐藏
const  [ flagClass , setflagClass  ] = useState(true)


//点击搜索 -- 显示 没有 权限
let header_s1_id = ()=>{
  //显示
  setflagClass(true)
  //执行  -- 3秒之后的操作
  header_tan()
}



//点击重置  清空页面inp的内容
let header_shua = ()=>{
  //刷新页面的方法
  window.location.reload()
}

//无数据状态下的样式
const [ kong , setkong ] = useState('')




  return (
    <div className='div_use_index'>

        <p className='header_p'><span>工作台/</span> 用户管理  </p>

          <div className={flagClass ? 'user_tan_top2' :'user_tan_top'}><span>!</span> 访客无权进行该操作</div>

          {/*第一部分   头部 */}
        <div className='header_inp'>
                    <div className="header_inp_top">
                              <ul>
                                <li>账户：<input type="text" placeholder='请输入用户账号'/></li>
                                <li>邮箱：<input type="text" placeholder='请输入账户邮箱'/></li>
                                <li>角色：
                                          <select name="" id="">
                                            <option value="" ></option>
                                            <option value="">管理员</option>
                                            <option value="">访客</option>
                                          </select>
                                </li>
                                <li>状态：
                                          <select name="" id="">
                                            <option value="" ></option>
                                            <option value="">锁定</option>
                                            <option value="">可用</option>
                                          </select>
                                </li>
                              </ul>
                                          {/* 两个按钮 */}
                                  <span className='header_s2' onClick={header_shua}>重置</span>
                                  <span className='header_s1' onClick={header_s1_id}>搜索</span>
                    </div>

        </div>

            {/* 第二部分 */}
          <div className="index_bottom">

                <div className="user_state">
                  <ul>
                    <li><input type="checkbox" />&emsp; 账户</li>
                    <li>邮箱</li>
                    <li>角色</li>
                    <li>状态</li>
                    <li>注册日期</li>
                    <li>操作</li>
                  </ul>
                </div>
                      {/* 下面的无数据的无状态 */}
                <div className="user_list">
                          {
                          kong &&   kong.length > 0  ?  1 : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂时没有数据' />
                          }
                </div>
          </div>



    </div>
  )
}

export default Index
